<template>
  <div class="container">
    <div class="main-box">
      <div class="discussion-area">
        <el-card>
          <el-page-header @back="goBack">
            <div slot="content" class="question-title">{{ nowItem.title }}
              <el-tag type="success" effect="dark" size="mini" style="margin-left: 5px;"
                      v-for="(item,index) in nowItem.tag" :key="index">{{ item }}
              </el-tag>
            </div>
          </el-page-header>

          <div class="question-info-list">
            <div class="question-info">提问时间：{{ nowItem.createTime }}</div>
            <el-divider direction="vertical"></el-divider>
            <div class="question-info">{{ answerPerson }}人回答</div>
            <el-divider direction="vertical"></el-divider>
            <div class="question-info">{{ nowItem.view }}次阅读</div>
          </div>
          <div>
            <div class="question-detail-title">问题描述：</div>
            <div class="question-detail-content">{{ nowItem.content }}</div>
            <div class="question-detail-attach" v-if="nowItem.fileUrl !== ''">
              附件：
              <el-link type="primary" :underline="false" @click="downloadFile(nowItem.fileUrl)">点击下载</el-link>
            </div>
          </div>
        </el-card>
        <el-card class="answer-list">
          <div class="answer-top-box">
            全部回答
            <div class="answer-count">共{{ answerList.length }}条回答</div>
          </div>
          <div class="answer-box">
            <div v-if="answerList.length > 0">
              <div class="single-answer" v-for="(item,index) in answerList" :key="index">
                <img :src="item.avatar" alt="" class="answer-avatar"/>
                <div class="answer-detail">
                  <div class="answer-info-list">
                    <div class="answer-info">{{ item.username }}</div>
                    <div class="answer-info" style="margin-left: 10px">{{ item.hospital }}</div>
                    <div class="answer-info" style="margin-left: 10px;display: flex" v-if="item.fileUrl !== ''">附件：
                      <el-link type="primary" :underline="false" @click="downloadFile(item.fileUrl)">点击下载</el-link>
                    </div>
                    <div class="answer-info" style="margin-left: auto;display: flex;align-items: center">
                      回答时间：{{ item.createTime }}
                      <el-link type="warning" :underline="false" style="margin-left: 5px"
                               v-if="hasAdoptionAnswer === false && nowUser.username === nowItem.publisher" @click="adoptTargetAnswer(item)">👆采纳为最佳回答
                      </el-link>
                      <div v-if="hasAdoptionAnswer === true && item.adoption === 1"
                           style="color: #67C23A;font-weight: bold">☑️最佳回答
                      </div>
                    </div>
                  </div>
                  <div class="answer-content">
                    {{ item.answer }}
                  </div>
                </div>
              </div>
            </div>
            <div v-else>
              <el-empty></el-empty>
            </div>
          </div>
          <div class="send-answer">
            <el-input
                resize="none"
                type="textarea"
                :rows="3"
                placeholder="请输入内容"
                v-model="answerForm.answer">
            </el-input>
            <div class="submit-box">
              <div>附件：
                <el-upload
                    action="https://yiyuy.mynatapp.cc/info/imageToOSS"
                    :on-success="handelUploadSuccess"
                    :limit="1">
                  <el-link :underline="false" type="primary">点击上传</el-link>
                </el-upload>
              </div>
              <el-button type="primary" size="small" style="margin-left: auto" @click="submitUserAnswer">提交回答
              </el-button>
            </div>
          </div>
        </el-card>
        <div class="bottom-blank"></div>
      </div>

      <div class="blank"></div>
      <div class="right-info">
        <el-card class="recommend-hospital">
          <div class="card-title">
            相关医院推荐
          </div>
          <div class="single-hospital" v-for="(item,index) in recommendHospital" :key="index">
            <div class="hospital-name">{{ item.hospital }}</div>
            <div class="hospital-skill">{{ item.skill }}</div>
          </div>
        </el-card>
        <el-card class="recommend-question">
          <div class="card-title">
            相关问题推荐
          </div>
          <div class="single-question" v-for="(item,index) in relatedQuestionList" :key="index">
            <img src="../assets/icon/ask-question.png" alt="" class="question-icon"/>
            <div class="other-question-title">{{ item.title }}</div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {adoptAnswer, getQuestionAllAnswer, getQuestionList, submitReply} from "@/api/question";
import {getUserInfo} from "@/api/login";

export default {
  name: 'QuestionDetail',
  data() {
    return {
      nowUser: {},
      // 相关问题推荐
      relatedQuestionList: [],
      // 是否有已经被采纳的答案
      hasAdoptionAnswer: false,
      // 全部回复
      answerPerson: 0,
      answerList: [],
      // 从上一个页面传递过来的item
      nowItem: '',
      recommendHospital: {},
      answerForm: {
        answer: '',
        fileUrl: '',
        questionId: ''
      },
      allHospital: {
        '糖尿病眼底视网膜病变': [{
          hospital: '山东中医药大学附属眼科医院',
          skill: '该医院的眼底病内科专业实力强劲，拥有多位在糖尿病视网膜病变治疗方面经验丰富的专家。例如刘力副主任医师擅长眼底荧光血管造影检查和激光治疗糖尿病视网膜病变；潘雪梅主任医师在糖尿病视网膜病变、视网膜静脉阻塞等眼底病的药物、激光治疗方面有丰富经验。医院能够提供从诊断到治疗的全方位服务，包括眼底检查、激光治疗以及药物注射等多种治疗手段。'
        }, {
          hospital: '东莞光明眼科医院',
          skill: '医院开设了眼底病诊疗中心，配备了国际领先的眼底检查设备，如超广角眼底成像系统、光学相干断层成像（OCT）等，能够对糖尿病视网膜病变进行早期识别和精准分级。医疗团队会根据患者的具体情况制定个性化的治疗方案，常用的治疗方式包括玻璃体注药（打眼针）和视网膜激光治疗，可有效控制出血和渗出，减轻水肿及炎症，改善视网膜功能。'
        }, {
          hospital: '大连大学附属中山医院',
          skill: '眼科在疑难复杂眼底病、眼外伤、白内障、青光眼的诊断和手术治疗方面都有很高水平。在糖尿病眼底病的治疗上，医院有独特的技术，处于辽南领先水平，经常接收外院及外地转来的疑难复杂眼病患者。医院能够开展玻璃体切割视网膜脱离等手术，还拥有娴熟的激光治疗技术，可为糖尿病视网膜病变患者提供多种有效的治疗选择。'
        }],
        '青光眼': [{
          hospital: '中山大学中山眼科中心',
          skill: '中山大学中山眼科中心是我国规模最大的公立眼科医院，也是中国唯一的世界卫生组织眼健康与视觉合作中心。在青光眼治疗方面，该中心拥有先进的诊断技术和治疗手段，能够开展多种微创手术，如360度房角切开术、XEN植入术等。此外，中心还致力于青光眼的早期诊断和干预，通过人工智能和生物疗法等前沿技术，为患者提供个性化的治疗方案'
        }, {
          hospital: '爱尔眼科医院',
          skill: '爱尔眼科医院集团在全国多地设有青光眼专科，拥有丰富的临床经验和先进的治疗技术。医院能够开展多种微创手术，如超声睫状体成形术（UCP）、iTrack微导管辅助下的微创手术等。此外，爱尔眼科还建立了青光眼患者培训学校，为患者提供系统科普和长期随访服务'
        }, {
          hospital: '上海市第一人民医院',
          skill: '上海市第一人民医院的眼科在青光眼治疗方面具有很高的水平，尤其擅长各类青光眼的手术治疗，包括青光眼白内障联合术、微创青光眼显微手术等。医院还配备了先进的诊断设备，能够对青光眼进行早期诊断和精准治疗。'
        }],
        '白内障': [{
          hospital: '北京大学人民医院',
          skill: '北京大学人民医院眼科在全国眼科机构排名中稳居前列，曾连续6年在综合医院眼科排名第一。医院在白内障治疗方面技术先进，尤其擅长各类白内障及人工晶体相关手术，包括白内障超声乳化术、飞秒激光白内障手术等。其专家团队经验丰富，能够为患者提供个性化的治疗方案。'
        }, {
          hospital: '广州爱尔眼科医院',
          skill: '广州爱尔眼科医院的白内障科由林振德教授领衔，是集团白内障超声乳化手术的临床教学基地。医院在白内障治疗方面技术先进，拥有博士伦Stellaris超声乳化仪等先进设备，能够开展飞秒激光白内障手术等微创手术。此外，医院还提供从术前检查到术后跟踪的一站式服务。'
        }, {
          hospital: '西安爱尔眼科医院',
          skill: '西安爱尔眼科医院在白内障治疗方面技术先进，特别是“飞秒白内障技术”。医院能够开展微创白内障手术，包括超声乳化术和飞秒激光辅助手术，手术切口小、恢复快。此外，医院还擅长处理复杂白内障病例，如高度近视合并白内障等，能够为患者提供个性化的治疗方案。'
        }],
        'AMD': [{
          hospital: '北京协和医院',
          skill: '北京协和医院的眼科在AMD治疗方面具有丰富的临床经验和先进的技术设备。医院能够提供多种治疗手段，包括抗VEGF药物注射、光动力疗法（PDT）等，尤其擅长处理复杂和难治性AMD病例。此外，医院还积极开展AMD的早期筛查和诊断，通过先进的光学相干断层扫描（OCT）等技术，为患者提供个性化的治疗方案'
        }, {
          hospital: '中山大学中山眼科中心',
          skill: '中山大学中山眼科中心是国内顶尖的眼科医院之一，在AMD的诊断和治疗方面处于领先地位。医院拥有先进的诊断设备，能够开展多种微创手术和药物治疗，包括飞秒激光辅助手术和新型抗VEGF药物注射。此外，医院还致力于AMD的临床研究，推动新技术和新疗法的应用'
        }, {
          hospital: '博鳌超级医院',
          skill: '博鳌超级医院国际眼视光眼科中心在AMD治疗方面具有独特的优势。医院率先引入了国际先进的抗VEGF药物Beovu®，并完成了中国首针注射，为AMD患者提供了更高效、更便捷的治疗选择。此外，医院还配备了先进的OCTA（光相干断层扫描血管成像）设备，能够精准识别AMD的病理特征，为患者提供精准的诊断和治疗。'
        }],
        '高血压': [{
          hospital: '中国医学科学院阜外医院',
          skill: '阜外医院是国家级心血管病专科医院，在高血压的诊断和治疗方面处于国内领先地位。医院设有专门的高血压病区，能够开展全面的高血压病因诊断和治疗，包括继发性高血压的筛查和精准治疗。医院还积极开展高血压相关的临床研究，推动新技术和新疗法的应用'
        }, {
          hospital: '北京协和医院',
          skill: '北京协和医院心内科利用多科协作的优势，开展高血压专科门诊，针对高血压患者的病因、风险评估及治疗进行综合诊治，并进行长期随诊。医院在高血压的综合管理和个体化治疗方面具有丰富的经验'
        }, {
          hospital: '中国医学科学院阜外医院深圳医院',
          skill: '该医院的高血压中心成立于2017年，在原发性和继发性高血压的诊断、治疗和科研方面处于国内领先地位。中心依托全院的综合学科优势，开展了多项高血压相关的先进检测和治疗技术，如动态血压监测、肾上腺静脉取血术等。'
        }],
        '近视': [{
          hospital: '中山大学中山眼科中心',
          skill: '中山大学中山眼科中心是国内顶尖的眼科医院之一，其近视眼激光治疗科成立于1994年，是我国首家开展准分子激光角膜原位磨镶术（LASIK）的单位。医院在近视治疗方面技术先进，能够开展全飞秒激光、半飞秒激光、准分子激光等多种近视矫正手术，同时在高度近视的ICL晶体植入手术方面也有丰富的经验。'
        }, {
          hospital: '北京同仁医院',
          skill: '北京同仁医院的眼科在国内享有很高的声誉，是首都医科大学附属医院的重点学科。医院的近视治疗中心设备先进，医生经验丰富，能够开展多种近视矫正手术，包括全飞秒激光手术和ICL晶体植入手术。此外，医院还设有专门的近视防控门诊，为青少年近视患者提供专业的防控建议。'
        }, {
          hospital: '复旦大学附属眼耳鼻喉科医院',
          skill: '复旦大学附属眼耳鼻喉科医院的眼科技术力量雄厚，是三级甲等医院。医院在近视治疗方面拥有先进的医疗设备和完善的管理体系，能够开展全飞秒激光手术、半飞秒激光手术等多种近视矫正手术。医院的眼科团队在近视手术的个性化设计和术后管理方面具有丰富的经验。'
        }],
        '其他疾病/异常': [{
          hospital: '首都医科大学附属北京同仁医院',
          skill: '北京同仁医院的眼底病科在全国排名中名列前茅。医院在眼底疾病的诊断和治疗方面技术先进，能够开展多种复杂眼底手术，如玻璃体视网膜手术、视网膜脱离修复术等。医院还设有专门的糖尿病视网膜病变门诊，为患者提供个性化的治疗方案'
        }, {
          hospital: '复旦大学附属眼耳鼻喉科医院',
          skill: '复旦大学附属眼耳鼻喉科医院的眼科技术力量雄厚，是三级甲等医院。医院在眼底疾病的诊断和治疗方面处于国内领先水平，能够开展多种微创手术和药物治疗，如抗VEGF药物注射、光动力疗法等'
        }, {
          hospital: '武汉大学附属爱尔眼科医院',
          skill: '武汉大学附属爱尔眼科医院的眼底病专科是医院的重点专科，拥有一支由多名专家组成的专业技术团队。医院能够开展多种眼底疾病治疗，包括飞蚊症、黄斑病变、糖尿病眼底病变等。医院还配备了国际先进的诊疗设备，如德国蔡司VisuMax全飞秒激光角膜手术系统等'
        }]
      }
    }
  },
  mounted() {
    this.nowItem = this.$route.query.item
    // 构造相关医院推荐
    let disease = this.nowItem.tag[0]
    this.recommendHospital = this.allHospital[disease]
    // 获取当前用户名
    this.getUsername();
    // 获取全部回复
    this.getReply()
    // 获取相关问题推荐
    this.getRelatedQuestion(0, disease);
  },
  methods: {
    getUsername() {
      getUserInfo().then(res => {
        this.nowUser = res.data
      })
    },
    handelUploadSuccess(response, file, fileList) {
      this.answerForm.fileUrl = response.data;
      this.$message.success('附件上传成功')
    },
    goBack() {
      this.$router.go(-1)
    },
    // 模拟点击oss连接进行下载
    downloadFile(url) {
      // 创建一个隐藏的 a 标签并触发下载
      const link = document.createElement('a');
      link.href = url;
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    },
    // 获取相关问题推荐
    getRelatedQuestion(tag, disease) {
      getQuestionList(tag, disease).then(res => {
        if (res.data.length <= 10) {
          this.relatedQuestionList = res.data;
        } else {
          this.relatedQuestionList = res.data.slice(0.10)
        }
      })
    },
    // 获取当前问题的全部回复
    getReply() {
      getQuestionAllAnswer(this.nowItem.id).then(res => {
        this.answerList = res.data;
        let dict = {}
        for (let i = 0; i < res.data.length; i++) {
          if (dict[res.data[i].username] === false) {
            this.answerPerson++;
            dict[res.data[i].username] = true
          }
          if (res.data[i].adoption === 1) {
            this.hasAdoptionAnswer = true;
          }
        }
      })
    },
    // 提交问题的回复
    submitUserAnswer() {
      this.answerForm.questionId = this.nowItem.id;
      submitReply(this.answerForm).then(res => {
        this.$message.success('回复成功')
        this.getReply();
        this.answerForm = {
          answer: '',
          fileUrl: '',
          questionId: ''
        }
      })
    },
    // 将某个回答采纳为最佳回答
    adoptTargetAnswer(item) {
      this.$confirm('是否将该回答采纳为最佳回答?', '采纳回答', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        adoptAnswer(item.id).then(res => {
          this.$message.success('采纳成功')
          this.getReply()
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
@keyframes moveIn {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.container {
  width: 100%;
  height: 100%;

  .main-box {
    width: 96%;
    height: 96%;
    margin: 15px auto;
    display: flex;
    padding: 0;

    .discussion-area {
      width: 71%;
      height: 100%;
      display: flex;
      flex-direction: column;
      animation: moveIn .5s ease-in;

      .question-title {
        font-size: 24px;
        font-weight: normal;
        display: flex;
        align-items: center;
      }

      .question-info-list {
        display: flex;
        align-items: center;
        border-bottom: 1px solid #eee;
        padding-bottom: 10px;
        margin-bottom: 20px;
        margin-top: 10px;

        .question-info {
          color: #999999;
          font-size: 14px;
        }
      }

      .question-detail-title {
        color: #999;
        font-size: 16px;
        margin-bottom: 10px;
      }

      .question-detail-content {
        font-size: 16px;
        margin-bottom: 10px;
      }

      .question-detail-attach {
        color: #999;
        display: flex;
      }

      .answer-list {
        margin-top: 20px;
        flex: 1;
        display: flex;
        flex-direction: column;

        /deep/ .el-card__body {
          height: 100%;
          display: flex;
          flex-direction: column;
        }

        .answer-top-box {
          border-bottom: 1px solid #eee;
          padding-bottom: 5px;
          font-size: 28px;
          position: relative;

          .answer-count {
            position: absolute;
            margin-left: auto;
            font-size: 14px;
            color: #999999;
            right: 0;
            bottom: 5px;
          }
        }

        .answer-box {
          flex: 1;
          overflow-y: auto;

          .single-answer {
            display: flex;
            padding-top: 10px;
            padding-bottom: 10px;
            border-bottom: 1px solid #eee;

            .answer-avatar {
              width: 50px;
              height: 50px;
              border-radius: 50%;
            }

            .answer-detail {
              margin-left: 15px;
              flex: 1;

              .answer-info-list {
                display: flex;
                align-items: center;
                margin-bottom: 10px;

                .answer-info {
                  color: #999;
                  font-size: 14px;
                }
              }

              .answer-content {
                padding: 10px 20px;
                background: #f8f8f8;
                border-radius: 4px;
                font-size: 16px;
                word-break: break-all;
                word-wrap: break-word;
              }
            }
          }
        }

        .send-answer {
          width: 100%;
          display: flex;
          flex-direction: column;

          .submit-box {
            margin-top: 10px;
            display: flex;
          }
        }
      }
    }

    .blank {
      width: 1.5%;
    }

    .right-info {
      flex: 1;
      animation: moveIn .5s ease-in;

      .single-hospital {
        margin-top: 10px;

        .hospital-name {
          font-size: 16px;
          font-weight: 700;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          cursor: pointer;
        }

        .hospital-name:hover {
          color: #409EFF;
        }

        .hospital-skill {
          color: #666;
          font-size: 14px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          line-clamp: 2;
          -webkit-box-orient: vertical;
        }
      }

      .recommend-question {
        margin-top: 20px;

        .single-question {
          display: flex;
          align-items: center;
          margin-top: 10px;

          .question-icon {
            margin-right: 10px;
          }

          .other-question-title {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
            cursor: pointer;
          }

          .other-question-title:hover {
            color: #409EFF;
          }
        }
      }
    }
  }
}

.bottom-blank {
  width: 100%;
  height: 30px;
}

.card-title {
  padding-left: 10px;
  color: #055ad7;
  font-size: 17px;
  font-weight: 700;
  position: relative;
  margin-bottom: 5px;
}

.card-title:before {
  content: "";
  display: block;
  width: 4px;
  height: 18px;
  background: #055ad7;
  position: absolute;
  left: 0;
  top: 4px;
}
</style>